<template>
  <div id="Consolidate">
    <!-- 头部 -->
    <v-header :isSelect='5'></v-header>
    <!-- 表格部分 -->
    <div class="Consolidate-box">
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="收藏的题目"
                     name="title">
          <!-- 表格部分 -->
          <div class="Wrong-box"
               v-if="!status">
            <v-tableView :tableData='tableData'
                         v-on:listenViewStatus='viewStatus'
                         :viewIndex='viewIndex'></v-tableView>
          </div>
          <!-- 答题部分 -->
          <v-selectTestView v-else
                            v-on:listenViewStatus='viewStatus'
                            :viewIndex='viewIndex'></v-selectTestView>
        </el-tab-pane>
        <el-tab-pane label="我的笔记"
                     name="note">
          <div class="Wrong-box"
               v-if="!status">
            <v-tableView :tableData='tableData'
                         v-on:listenViewStatus='viewStatus'
                         :viewIndex='viewIndex'></v-tableView>
          </div>
          <!-- 答题部分 -->
          <v-selectTestView v-else
                            :wrongNote='wrongNote'
                            v-on:listenViewStatus='viewStatus'
                            :viewIndex='viewIndex'></v-selectTestView>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 尾部 -->
    <v-footer></v-footer>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import TableView from '@/components/TableView.vue'
import Footer from '@/components/Footer.vue'
// import util from '../api/utils.js'
import SelectTestView from '@/components/SelectTestView.vue'

export default {
  name: 'Consolidate',
  components: {
    'v-header': Header,
    'v-tableView': TableView,
    'v-footer': Footer,
    'v-selectTestView': SelectTestView
  },
  data () {
    return {
      // 选项卡
      activeName: 'title',
      // 答题与列表的切换状态
      status: false,
      // 表格数据
      tableData: [],
      // 到那个页面需要请求那个初始化参数
      viewIndex: 2,
      // 收藏的题目表格数据
      titleData: [],
      // 我的笔记表格数据
      noteData: [],
      // 显示移除的按钮
      wrongNote: 2
    }
  },

  computed: {},

  mounted () {
    this.$http.collectList({
      phone: localStorage.getItem('mobile')
    }).then((res) => {
      console.log(res)
      // for (let item of res.data.data) {
      //   item.create_time = util.formatDate(item.create_time * 1000)
      // }
      this.tableData = res.data.data
      this.titleData = res.data.data
    }).catch((err) => {
      console.log(err)
    })
    // 笔记数据
    this.$http.noteList({
      phone: localStorage.getItem('mobile'),
      custom_extend: 1
    }).then((res) => {
      console.log(res)
      // for (let item of res.data.data) {
      //   item.create_time = util.formatDate(item.create_time * 1000)
      // }
      this.noteData = res.data.data
    }).catch((err) => {
      console.log(err)
    })
  },

  methods: {
    handleClick (tab, event) {
      switch (this.activeName) {
        case 'note':
          this.tableData = this.noteData
          this.status = false
          break
        case 'title':
          this.tableData = this.titleData
          this.status = false
          break
      }
    },
    // 从自组建传过来的切换状态
    viewStatus (data) {
      console.log(data)
      this.status = data
    }
  }
}

</script>

<style lang='less'>
#Consolidate {
  height: 100%;
  background: white;
  .Consolidate-box {
    padding: 30px 54px 0;
    width: 80%;
    // width: calc(100% - 108px);
    height: calc(100% - 138px);
    // 选项卡
    .el-tabs {
      height: 100% !important;
      .el-tabs__header {
        .el-tabs__nav {
          border: none;
          .el-tabs__item {
            margin-right: 5px;
            border-radius: 10px 10px 0px 0px;
            background: #d9d9d9;
            width: 120px;
          }
          .is-active {
            background: #64b5f6 !important;
            color: white;
          }
        }
      }
      .el-tabs__content {
        height: calc(100% - 56px) !important;
        .el-tab-pane {
          height: calc(100% + 108px);
          .Wrong-box {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
